<template>
  <div style="min-height:145px">
    <div class="EmergencyList-sstj">
      <div class="serchBox">
        <div class="EmergencyList-sstj-icon"></div>
        <div class="EmergencyList-sstj-titel">{{ title ? title : "筛选条件" }}</div>
      </div>
    </div>
    <div class="formBox">
      <div class="box_left">
        <el-form class="form" ref="form" :model="form" inline size="small"
          :label-width="labelWidth ? labelWidth : '130px'">
          <el-row v-for="(i, j) in groupedArray" :key="j">
            <el-col :span="item.span === undefined ? 6 : item.span < 6 ? 6 : item.span > 24 ? 24 : item.span"
              v-for="(item, index) in i" :key="index">
              <el-form-item :label="item.label + '：'" :prop="item.id">
                <LsdForm :compData="item" :form="form" @node-click="handleSelectTree(arguments, item)"
                  @change="selectChange(arguments, item)" @handleTreeSelect="handleTreeSelect(arguments, item)" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="btnBox">
        <el-button type="primary" @click="query" size="mini">查询</el-button>
        <el-button size="mini" @click="reset">重置</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String
    },
    labelWidth: {
      type: String
    },
    form: {
      type: Object
    },
    formData: {
      type: Array
    }
  },
  computed: {
    // 处理传入的formData
    groupedArray() {
      const grouped = [];
      let currentGroup = [];
      let currentGroupSpan = 0;
      for (let i = 0; i < this.formData.length; i++) {
        const item = this.formData[i];
        const span = item.span === undefined ? 6 : item.span < 6 ? 6 : item.span > 24 ? 24 : item.span;
        if (currentGroupSpan + span <= 24) {
          currentGroup.push(item);
          currentGroupSpan += span;
        } else {
          grouped.push(currentGroup);
          currentGroup = [item];
          currentGroupSpan = span;
        }
      }
      if (currentGroup.length > 0) {
        grouped.push(currentGroup);
      }
      return grouped;
    }
  },
  methods: {
    handleSelectTree(arg, item) {
      this.$emit("node-click", arg, item);
    },
    selectChange(arg, item) {
      this.$emit("change", arg, item);
    },
    handleTreeSelect(arg, item) {
      this.$emit("handleTreeSelect", arg, item);
    },
    query() {
      this.$emit("query");
    },
    reset() {
      this.$emit("reset");
    }
  }
};
</script>

<style lang="less" scoped>
.EmergencyList-sstj {
  border-bottom: solid 1px #ccc;
  display: flex;
  margin-bottom: 5px;
  justify-content: space-between;

  .serchBox {
    display: flex;

    .EmergencyList-sstj-icon {
      width: 6px;
      height: 20px;
      background: #236dfe;
      border-radius: 4px;
      margin: auto 8px auto 0;
    }

    .EmergencyList-sstj-titel {
      margin-left: 5px;
      font-family: "MicrosoftYaHeiUI-Bold", "Microsoft YaHei UI Bold", "Microsoft YaHei UI";
      font-weight: 700;
      font-style: normal;
      font-size: 20px;
      line-height: 40px;
      color: #333333;
      text-align: center;
    }
  }
}

:deep(.el-form-item) {
  display: flex;
  margin: 5px 10px 15px 0 !important;
}

:deep(.el-form-item__content) {
  // width: 68%;
  flex: 1;

  .el-input__inner {
    width: 100%;
  }

  .el-select {
    width: 100%;
  }

  .el-date-editor {
    width: 100%;
  }

  .el-form-item {
    margin-right: 10px !important;
  }
}

.formBox {
  display: flex;
  justify-content: space-between;

  .box_left {
    width: 93%;
  }

  .btnBox {
    flex: 1;
    display: flex;
    height: 32px;
    float: right;
    margin-top: 5px;
  }
}
</style>
